<template>
	<view class="content display  width-100 displayColumn displaycenter_aliem">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">填写门站信息</text>
			</template>
		</u-navbar>

		<!-- 门店名称 -->
		<view class="fn_stationName display  displayColumn M-T30">
			<span class="fn_ttx1 M-L24">门站名称</span>
			<span class="fn_ttx2 M-L24" style="margin-top: 12rpx;">填写的名称务必与名站招牌上的名称一致</span>
			<input type="text" style="margin-top: 20rpx;" v-model="FormData.mingchneg" placeholder="请输入门头招牌上的名称"
				class="fn_input M-L24" placeholder-class="fn_input_pla" />
		</view>
		<!-- 门头张片 -->
		<view class="fn_mentou display  displayColumn M-T30">
			<span class="fn_ttx1 M-L24 M-T24">门头照片</span>
			<span class="fn_ttx2 M-L24 " style="margin-top: 12rpx;">请上传真实的门头照片，必须将门站名称、站内环境、门站入口拍摄清楚</span>
			<view class="display M-L24 M-T24">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					class="M-L24" :maxCount="1" width="330" height="120"></u-upload>
			</view>
		</view>
		<!-- 所在地区 -->
		<view class="suo_city display  displayColumn M-T30">
			<span class="diqu M-L24 M-T24">所在地区</span>
			<input type="text" style="margin-top: 20rpx;" v-model="FormData.city" class="fn_wodeIpnut M-L24"
				placeholder-class="fn_wodeIpnut1" placeholder="请选择地区" />
			<span class="diqu M-L24 M-T24">详细地址</span>
			<input type="text" style="margin-top: 20rpx;" v-model="FormData.address" class="fn_wodeIpnut M-L24"
				placeholder-class="fn_wodeIpnut1" placeholder="请输入门站详细地址" />
			<span class="diqu M-L24 M-T24">联系电话</span>
			<input type="text" style="margin-top: 20rpx;" v-model="FormData.phoneNumber" class="fn_wodeIpnut M-L24"
				placeholder-class="fn_wodeIpnut1" placeholder="请输入联系电话" />
			<span class="diqu M-L24 M-T24">营业时间</span>
			<input type="text" style="margin-top: 20rpx;" @click="tosele" :disabled="true" v-model="FormData.times"
				class="fn_wodeIpnut M-L24" placeholder-class="fn_wodeIpnut1" placeholder="请选择营业时间" />
			<span class="diqu M-L24 M-T24">营业状态</span>
			<view class="display displaycenter_aliem width-100  " style="margin-top: 20rpx;">
				<view class="fn_stataus display  all_item M-L24"  :class="{fn_stataus:selectArrIndex!=index,fn_stataus1:selectArrIndex==index,'M-L24':selectArrIndex!=0}" v-for="(item,index) in arr" :key="index" @click="selectArrIndex = index">
					<span>{{item}}</span>
				</view>
			</view>
			
				
		</view>

		<u-popup :show="show" :safeAreaInsetBottom="false" :round="24">
			<view class="fn_popup display   displayColumn">
				<view class="fn_popup_one display  width-100 M-T30 displaycenter_aliem">
					<span @click="show =false">取消</span>
					<span>营业时间</span>
					<span @click="confits">确定</span>
				</view>
				<!-- 开始时间和结束时间 -->
				<view class="fn_popup_two display displaycenter_aliem  width-100 M-T30">
					<view class=" display  all_item" :class="{two_left:selectIndex==0,two_right:selectIndex!=0}"
						style="margin-left: 40rpx;" @click="changeIndex(0)">
						<span>开始时间</span>
					</view>
					<span class="henggang">-</span>
					<view class=" display  all_item" :class="{two_left:selectIndex==1,two_right:selectIndex!=1}"
						@click="changeIndex(1)">
						<span>结束时间</span>
					</view>
				</view>
				<!-- 时间选择 -->
				<view class="display width-100" style="height: 400rpx;">
					<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in months" :key="index">{{item}}时</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in days" :key="index">{{item}}分</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</u-popup>
		<view class="fn_bottom width-100" style="margin-top: 58rpx;padding-bottom: 40rpx;">
			<view class="fn_btns_all display width-100 all_item">
				<button class="fn_buttons" @click="submits">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data:function() {
			   const months = []
			   const days = []
            for (let i = 1; i <= 24; i++) {
				if(i<10){
					i = '0'+i
				}
                months.push(i)
            }
            for (let i = 1; i <= 59; i++) {
				if(i<10){
					i = '0'+i
				}
                days.push(i)
            }
			return {
				arr:['营业中','歇业中','已闭站'],
				selectArrIndex:0,
				show: false,
				value1: '',
				fileList1: [],
				selectIndex: 0,
				FormData: {
					mingchneg: '', //门站名称
					city: '', //城市
					address: '',
					phoneNumber: '',
					ossid: '',
					times: '',
					startTime:'',
					endTime:'',
					langs:'',
					lats:''
				},
                months, 
                days,
                value: [],
                indicatorStyle: `height: 50px;`
			}
		},
		onLoad() {
			let that = this
			uni.getLocation({
				type: 'wgs84',
				success: (res) =>{
					that.FormData.langs = res.longitude
					that.FormData.lats = res.latitude
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
		},
		methods: {
			confits(){
				if(uni.$u.test.isEmpty(this.FormData.startTime) ){
					this.$modal.msg('营业开始时间不能为空！')
					return false;
				}
				if(uni.$u.test.isEmpty(this.FormData.endTime)){
					this.$modal.msg('营业结束时间不能为空！')
					return false;
				}
				this.FormData.times = this.FormData.startTime + '-' + this.FormData.endTime;
				this.show = false
			},
			bindChange: function(e) {
				// 开始时间
				if(this.selectIndex == 0){
					this.FormData.startTime = this.months[e.detail.value[0]]+':'+this.days[e.detail.value[1]];
				}else{
					// 结束时间
					this.FormData.endTime = this.months[e.detail.value[0]]+':'+this.days[e.detail.value[1]];
				}
			},
			changeIndex(e) {
				this.selectIndex = e;
			},
			tosele() {
				this.show = true;
				this.FormData.startTime = this.months[0]+':'+this.days[0];
				this.FormData.endTime = this.FormData.startTime;
			},
			// 提交
			submits() {
				if (this.fileList1.length == 0) {
					this.$modal.msg('门头照不能为空!')
					return false;
				}
				if (uni.$u.test.isEmpty(this.FormData.mingchneg)) {
					this.$modal.msg('门站名称不能为空！')
					return false;
				}
				if (uni.$u.test.isEmpty(this.FormData.city)) {
					this.$modal.msg('所在地区不能为空！');
					return false;
				}
				if (uni.$u.test.isEmpty(this.FormData.address)) {
					this.$modal.msg('详细地址不能为空！');
					return false;
				}
				if (uni.$u.test.isEmpty(this.FormData.phoneNumber)) {
					this.$modal.msg('联系电话不能为空！')
					return false;
				}
				if(uni.$u.test.isEmpty(this.FormData.startTime) || uni.$u.test.isEmpty(this.FormData.endTime)){
					this.$modal.msg('营业时间不能为空！')
					return false;
				}
				this.$modal.loading('加载中');
				let data = {
					lng:this.FormData.langs,//经度
					lat:this.FormData.lats,//维度
					 businessStatus:this.selectArrIndex,//营业状态  营业状态(0:营业中，1:歇业中，2:已闭站)
					 endTime:this.FormData.endTime,//营业结束时间 ="HH:mm:ss")
					 phone:this.FormData.phoneNumber,//联系电话
					 stationName:this.FormData.mingchneg,//
					 imgUrl:this.FormData.ossid,//门头照
					 area:this.FormData.city,//所在地区
					 address:this.FormData.address,//详细地址
					 startTime:this.FormData.startTime,//兴业开始时间
				}
				this.$req.post('/xcx/petrolStationVerify',data).then(res=>{
					this.$modal.closeLoading()
					if(res.data.code==200){
						this.$modal.msg('新增成功');
						setTimeout(()=>{
							uni.navigateBack();
						},500)
						
					}else{
						this.$modal.msg(res.data.msg)
					}
				})
			},
			afterRead(e) {
				let that = this
				this.sendImg(e.file[0].url).then(ms => {
					// 进行验证
					let datas = [];
					datas.push({
						url: ms.url
					})
					this.fileList1 = datas;
					this.FormData.ossid = ms.ossId;

				})
			},
			// 上传图片接口
			sendImg(url, index) {
				return new Promise(resolve => {
					this.$req.uploadImg(url).then(res => {
						resolve(res.data)

					})
				})
			},
			deletePic(e) {
				this.fileList1 = [];
				this.FormData.ossid = '';
			}
		}
	}
</script>

<style scoped lang="scss">
	.picker-view {
			width: 750rpx;
			height: 400rpx;
			margin-top: 10rpx;
		}
		.item {
			line-height: 100rpx;
			text-align: center;
		}
	.fn_stationName {
		width: 690rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fn_input {
		padding-left: 20rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #000;
		width: 642rpx;
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.fn_input_pla {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.fn_ttx1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_ttx2 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.fn_mentou {
		width: 690rpx;
		height: 434rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.suo_city {
		width: 690rpx;
		// height: 492rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.diqu {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_wodeIpnut {
		font-weight: 400;
		font-size: 24rpx;
		color: #000;
		padding-left: 24rpx;
		width: 642rpx;
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.fn_wodeIpnut1 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.fn_buttons {
		width: 690rpx;
		height: 66rpx;
		background: #126BC9;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.fn_popup {
		width: 750rpx;
		height: 636rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.fn_popup_one {
		justify-content: space-around;

		:nth-child(1) {
			font-weight: 400;
			font-size: 28rpx;
			color: #212121;
		}

		:nth-child(2) {
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
		}

		:nth-child(3) {
			font-weight: 600;
			font-size: 28rpx;
			color: #126BC9;
		}
	}

	.two_left {
		// width: 152rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
		height: 62rpx;
		background: rgba(18, 107, 201, 0.1);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid;
		border-image: linear-gradient(90deg, rgba(23, 105, 143, 1), rgba(173, 157, 246, 1), rgba(23, 105, 143, 1)) 2 2;

		span {
			font-weight: 600;
			font-size: 24rpx;
			color: #126BC9;
		}
	}

	.two_right {
		padding-left: 28rpx;
		padding-right: 28rpx;
		height: 62rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #72778A;

		span {
			font-weight: 400;
			font-size: 24rpx;
			color: #72778A
		}
	}

	.henggang {
		width: 16rpx;
		height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #000000;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.fn_stataus{
		width: 152rpx;
		height: 62rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #72778A;
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}
	.fn_stataus1{
		width: 152rpx;
		height: 62rpx;
		background: rgba(18,107,201,0.1);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid;
		border-image: linear-gradient(90deg, rgba(23, 105, 143, 1), rgba(173, 157, 246, 1), rgba(23, 105, 143, 1)) 2 2;
		font-weight: 600;
		font-size: 24rpx;
		color: #126BC9;
	}
</style>